<template>
    <div id="faceServe">
        <c-title 
            :hide="false"
            :text="'面对面服务'"
            :class="faceServetitle"
            :style="'background-color:'+'var(--themeBaseColor)'"></c-title>
        <div class="face-head" :style="'background-color:'+'var(--themeBaseColor)'">
            <div>
                <h1>线下联盟商家</h1>
                <h3>同步线下售卖与服务</h3>
            </div>
        </div>
        <!-- <div class="face-form">
            <el-form :model="query" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="title" required>
                    <el-input v-model="query.title"></el-input>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="face-form">
                <van-field
                    name="validator"
                    v-model="query.title"
                    required
                    @blur="monitorInput"
                    :border="false"
                    trigger="onChange"
                    label="商品名称或服务名称"
                />
                <van-cell title="商品数量" required title-class="face-cell" :border="false">
                    <template #right-icon>
                        <van-stepper v-model="query.recharge_total"  input-width="50px" />
                    </template>
                </van-cell>
                <van-field
                    v-model="query.recharge_member_mobile"
                    required
                    :border="false"
                    trigger="onBlur"
                    label="消费者手机号码"
                    @input="monitorMoblie"
                    :class="[isActive?'active':'']"
                    type="number"
                >
                <template #extra >
                    <div class="errorRed" v-if="errorText">{{errorText}}</div>
                </template>
                </van-field>
                <van-field
                    v-model="query.recharge_merchant_mobile"
                    required
                    :border="false"
                    label="商家手机号码"
                    :class="[shopsActive?'shopsActive':'']"
                    @input="merchantMoblie"
                >
                    <template #extra >
                        <div class="errorRed" v-if="ShopsErrorText">{{ShopsErrorText}}</div>
                    </template>
                </van-field>
                <van-field
                    v-model="amount"
                    required
                    :border="false"
                    label="现场实收金额"
                    type="number"
                    maxlength="11"
                    @input="changeprice"
                >
                </van-field>
                <div class="agreement">
                    <van-checkbox v-model="checked"   icon-size="12px"></van-checkbox>
                    <div class="agree">
                        <span>请同意</span> <span class="agree-red">热心服务，拒绝欺骗，禁止虚假交易，遵守国家法律</span>
                    </div>
                </div>
        </div>
        <div class="face-integral">
            <div class="integral">
                <p class="title">消费者获得{{setting.point_name}}</p>
                <p class="price" >{{Number(amount).toFixed(2) || '0.00'}}</p>
            </div>
            <div class="integral">
                <p class="title">商家可获得{{setting.love_name}}</p>
                <p class="price">{{Number(merchant_love_value).toFixed(2) || '0.00'}}</p>
            </div>
        </div>
        <block v-if="flag">
            <van-button  class="order-pay" @click="orderPay" loading  loading-text="跳转中...">支付￥{{query.amount || '0.00'}}</van-button>
        </block>
        <block v-else>
            <van-button  class="order-pay" @click="orderPay"    v-if=" query.amount !== '' &&  query.amount !== '0.00' &&  query.amount !== 0">支付￥{{query.amount || '0.00'}}</van-button>
            <van-button  class="order-pay" @click="orderPay" disabled  v-else>支付￥{{query.amount || '0.00'}}</van-button>
        </block>
        
        <div class="mb10"></div>
    </div>
</template>

<script>
import faceServe from './faceServe';
export default faceServe;
</script>
<style scoped>
.serve-title ::v-deep .van-nav-bar {
  background-color: var(--themeBaseColor);
}

.serve-title ::v-deep .van-nav-bar__content {
  background-color: var(--themeBaseColor);
}

.serve-title ::v-deep .van-nav-bar__left .van-button {
  background-color: var(--themeBaseColor);
}

.serve-title ::v-deep .van-nav-bar__title {
  font-size: 1.125rem;
  color: #fff;
  font-weight: 100;
}

.serve-title ::v-deep .van-button__icon {
  font-size: 1.125rem;
  color: #fff;
  font-weight: 100;
}

.face-form ::v-deep .van-field {
  flex-direction: column;
  border-radius: 0.625rem;
}

.face-form ::v-deep .van-field:last-child {
  padding-bottom: 1.875rem;
}

.face-form ::v-deep .van-field__label {
  width: auto;
  font-size: 0.75rem;
  color: #333;
}

.face-form ::v-deep .van-cell--required::before {
  top: 0.75rem;
}

.face-form ::v-deep .van-field__control {
  background: #f4f4f4;
  border-radius: 5.0016px;
  height: 2.0625rem;
  padding-left: 0.875rem;
  margin-top: 0.625rem;
}

.face-form ::v-deep .active .van-field__control,
.face-form ::v-deep .shopsActive .van-field__control {
  border: 1px solid red;
}

.face-form ::v-deep .van-field:last-child .van-field__control {
  padding-left: 0;
  background: #fff;
}

.face-form ::v-deep .van-field__value .van-field__button {
  margin-top: 0.625rem;
}

.face-form ::v-deep .van-stepper__input {
  border-radius: 0.3125rem;
}

.face-form ::v-deep .van-stepper__minus {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-right: 0.5625rem;
}

.face-form ::v-deep.van-stepper__plus {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-left: 0.5625rem;
}

.face-form ::v-deep .van-field__control--custom {
  align-items: flex-start;
}

.face-form .agreement {
  display: flex;
  padding: 0 1rem 1rem 1rem;
}

/* .face-form  ::v-deep  .van-checkbox__icon {
    margin-top:0.625rem;
} */
.face-form ::v-deep .van-checkbox {
  padding-right: 0.625rem;
}

.face-form ::v-deep .van-checkbox__icon .van-icon {
  line-height: 0.7rem;
}
</style>
<style  lang="scss" scoped>
  #faceServe {
    .face-head {
      height: 9.375rem;
      box-sizing: border-box;
      background: #5bc587;
      position: relative;

      h1 {
        font-size: 2.5rem;
        font-weight: 400;
        color: #fff;
        padding: 0.7rem 0 1rem 0;
        text-align: center;
      }

      h3 {
        font-size: 1.125rem;
        font-weight: 400;
        color: #fff;
        text-align: center;
        padding: 0 0 1.1875rem 0;
      }
    }

    .face-form {
      margin: 0 0.625rem 0 0.625rem;
      position: relative;
      top: -2.4375rem;
      background: #fff;
      border-radius: 0.625rem;

      .form-content {
        border-radius: 0.625rem;
        // padding: 0 0 1.25rem 0;
      }

      .face-cell {
        text-align: left;
        font-size: 0.625rem;
      }

      .errorRed {
        color: red;
        margin-top: 0.375rem;
        font-size: 0.625rem;
        text-align: left;
      }

      .agree {
        font-size: 0.625rem;

        span {
          // white-space:nowrap;
        }

        .agree-red {
          color: #f20000;
          font-size: 0.625rem;
          text-align: left;
        }
      }
    }

    .face-integral {
      display: flex;
      justify-content: space-between;
      margin: 0 0.625rem 0 0.625rem;

      .integral {
        width: 10.9375rem;
        height: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 0.625rem;
        position: relative;
        top: -1.8125rem;

        .title {
          color: #666;
          font-size: 0.6875rem;
          margin-bottom: 0.75rem;
        }

        .price {
          color: #f20000;
          font-size: 1.125rem;
        }
      }
    }

    .order-pay {
      width: 11.25rem;
      height: 2.0625rem;
      line-height: 2.0625rem;
      background: #5bc489;
      border-radius: 5px;
      color: #fff;
      font-size: 0.75rem;
      margin: 0 auto;
      cursor: pointer;
    }

    .mb10 {
      height: 0.625rem;
      clear: both;
    }
  }
</style>